/**
 * Created by liuzengrong on 2019/8/12.
 */
import React, {Component} from 'react';
import {PageHeader, message, Typography, Modal, Form, Input, Row, Col} from 'antd';
import styles from './index.less';
import axios from '@/components/Engineering/axios';
import Validator from '@/utils/Validator'
import router from "umi/router";

const {Paragraph} = Typography;
const FormItem = Form.Item


class Service extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      businessName: '',
    };
    this.ACJSESSIONID = sessionStorage.getItem('ACJSESSIONID')
  }


  handleSubmit = () => {
    this.props.form.validateFields((err: any, values: any) => {
      if (err) return message.error("填写的参数不完整");
      values.type = this.state.productType;
      // this.ACJSESSIONID ? null : values.code = LESSEE_CODE;
      values.code = LESSEE_CODE
      axios
        .ajax({url: `${MC_PATH}/api/web/apply`, params: {...values}}, 'post')
        .then(res => {
          if (res && res.resultCode == 'ok') {
            message.success('您已经提交成功，请耐心等待，我们会尽快联系您，谢谢！');
            this.props.form.resetFields()
            this.setState({productvisable: false})
          } else if (res.errMessage) {
            message.error(res.content || res.errMessage);
          }
        });

    })

  }


  render() {
    const {getFieldDecorator} = this.props.form
    const ProductContent = (props) => {
      return <div className="content">
        {props.secondLevelTitle ? <Paragraph>
          {props.secondLevelTitle}
        </Paragraph> : null}

        {props.introduce ? <Paragraph>
          {props.introduce}
        </Paragraph> : null}
        <p className={styles.contentLink}>
          <a onClick={() => {
            this.setState({productvisable: true, businessName: props.title, productType: 2, productModalTitle: '立即咨询'})
          }}>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info"/>
            立即咨询
          </a>

          <a onClick={() => {
            this.setState({productvisable: true, businessName: props.title, productType: 1, productModalTitle: '立即下单'})
          }}>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info"/>
            立即购买
          </a>
          <a onClick={() => {
            router.push({pathname:'/product/software/price',query:{pruductName:props.pruductName}});
          }}>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc"/>
            产品报价
          </a>
        </p>


      </div>
    };

    const extraContent = (
      <img
        src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
        alt="content"
      />
    );

    const formItemLayout = {
      labelCol: {
        xs: {span: 6},


      },
      wrapperCol: {
        xs: {span: 18},

      },
    };

    const productList = [
      {
        title: '外贸综合服务系统',
        // secondLevelTitle: '出口退税是指国家运用税收杠杆奖励出口的一种措施。一般分为两种',
        introduce: '洲博通外贸综合服务平台：运用“互联网+外贸+金融”理念，以解决中小企业的痛点为导向，将传统外贸涉及的各个环节进行系统性优化与整合，自主研发外贸综合服务平台，实现全流程业务线上操作与线下服务的高度协同。系统通过环环相扣的操作步骤以及核心业务逻辑，全面降低了订单的出错概率，提升外贸环节的工作效率。',
        pruductName:'integrated',

      },
      {
        title: '自营出口服务系统',
        introduce: '自营出口服务系统是专门为需要获得海关AEO认证的出口企业量身定制开发的业务系统。该系统能够全面贴合自营出口企业的实际业务需求，能够实现在线管理客户和供应商资料及交易数据，全面管理订单，智能结算等等。系统的核心业务逻辑完全符合海关AEO一般认证和高级认证的要求，可以帮助客户实现信息化转型。',
        pruductName:'selfExport',
      },
      {
        title: '自营进口服务系统',
        introduce: '自营进口服务系统立足于行业特点，注重海外供应商和国内买家的管理，对于快速流通产品和库存流通的产品都有很好的解决方案。系统已经全面接通国外公司征信数据，能够实时调取征信报告，助力客户筛选供应商，降低交易风险。',
        pruductName:'selfImport',

      },
      {
        title: '代理进口服务系统',
        introduce: '代理进口服务系统侧重于将进口的各个环节服务标准化，特别适用于长期从事代理进口业务的供应链公司。系统充分考虑到了实际操作当中的各个业务场景，各个功能模块',
        pruductName:'agentImport',
      },
    ]


    return (
      <>
        <div style={{maxWidth: '1200px', margin: 'auto', background: '#fff', paddingTop: 80, paddingBottom: 80}}>
          {productList.map(item => {
            return <PageHeader title={item.title}>
              <div className={styles.wrap}>
                <div className={styles.content}><ProductContent {...item} /></div>
                <div className={styles.extraContent}>{extraContent}</div>
              </div>
            </PageHeader>
          })}
        </div>
        <Modal
          title={this.state.productModalTitle || false}
          width={700}
          closable={false}
          visible={this.state.productvisable}
          onOk={this.handleSubmit}
          onCancel={() => {
            this.setState({productvisable: false});
            this.props.form.resetFields()
          }}
        >
          <Form>
            <div style={{marginBottom: 50}}>感谢您关注洲博通外贸综合服务平台！您可以直接拨打我们的客服电话400-189-2323咨询下单，也可以在下方留下您的联系方式，我们会尽快给您回电。
            </div>
            <Row gutter={16}>
              <Col span={12}>
                <FormItem label="业务类型" {...formItemLayout}>
                  {getFieldDecorator('businessName', {
                    initialValue: this.state.businessName,
                    rules: [
                      {required: true, message: '业务类型不能为空'},
                    ],
                  })(<Input disabled>
                  </Input>)}
                </FormItem>
              </Col>

              <Col span={12}>
                <FormItem label="联系人" {...formItemLayout}>
                  {getFieldDecorator('contacts', {
                    initialValue: '',
                    rules: [
                      {required: true, message: '联系人不能为空'},
                      {min: 2, max: 6, message: '请输入正确的联系人'}
                    ],
                  })(<Input>
                  </Input>)}
                </FormItem>
              </Col>

              <Col span={12}>
                <FormItem label="联系电话" {...formItemLayout}>
                  {getFieldDecorator('phone', {
                    initialValue: '',
                    rules: [
                      {required: true, message: '联系电话不能为空'},
                      {pattern: Validator.mobile, message: '联系电话格式有误'},
                    ],
                  })(<Input>
                  </Input>)}
                </FormItem>
              </Col>



            </Row>
          </Form>
        </Modal>
      </>
    );
  }
}


export default Form.create({name: 'Service'})(Service)

